<script lang="ts" setup>
// @ts-ignore
import emitter from "~/utils/mitt";
// @ts-ignore
import {publishComment} from "~/server/comment.service";
// @ts-ignore
import {Message} from "@arco-design/web-vue";
// @ts-ignore
import {Fancybox} from "@fancyapps/ui";
// @ts-ignore
import {auth} from "~/service/auth.service";
// @ts-ignore
import {emojiEventReply} from "~/utils/emoji";
// @ts-ignore
import {getCaptcha} from "~/server/captcha.service";

const userStore = useUserStore()
const userInfo = toRef(userStore.$state, 'userInfo')
const replyInfo = ref('' as any)
const replyUserInfo = ref({} as any)
const commentStore = useCommentStore()
const route = useRoute()
const appStore = useAppStore()
const captchaBase64Image = ref('' as any)
const captchaUuid = ref('' as any)
const captchaCode = ref('' as any)

const getReplyUserInfo = () => {
    let item: any = sessionStorage.getItem('replyData');
    replyUserInfo.value = JSON.parse(item)
}

emitter.on('replyUserInfo', async () => {
    await getReplyUserInfo()
})

function validate() {
    if (userStore.userInfo === '') {
        Message.warning('请登录后评论!')
        //关闭评论弹窗
        Fancybox.close()
        //弹出登录框
        auth.login()
        return false
    }
    if (replyInfo.value == '') {
        Message.warning('请填写评论内容!')
        return false
    }
    if (captchaCode.value == '') {
        Message.warning('请填写验证码!')
        return false
    } else {
        return true
    }
}

function putReplyComment() {
    const params: any = {
        type: commentStore.type,
        //回复用户id
        replyUserId: userInfo.value.userInfoId,
        // 父评论id
        parentId: replyUserInfo.value.replyParentId,
        commentContent: replyInfo.value,
        captchaUuid: captchaUuid.value,
        captchaCode: captchaCode.value
    }
    params.topicId = route.params.id
    if (validate()) {
        publishComment(params).then(({data}: any) => {
            if (data.flag) {
                replyInfo.value = ''
                fetchReplies()
                if (appStore.websiteConfig.isCommentReview) {
                    Message.warning('回复评论成功,正在审核中!')
                } else {
                    Message.success('回复评论成功!')
                }
                //关闭评论弹窗
                Fancybox.close()
            } else {
                Message.warning(data.message)
            }
        })
    }
}

async function fetchReplies() {
    switch (commentStore.type) {
        case 1:
            emitter.emit('articleFetchReplies', 1)
            break
        case 2:
            emitter.emit('messageFetchReplies', 2)
            break
    }
}

const reply = ref(null)

emitter.on('emoji-reply', () => {
    updateReplyTextarea()
})

function updateReplyTextarea() {
    nextTick(() => {
        replyInfo.value = reply.value.value
    })
}

async function getCaptchaBase64Image() {
    await getCaptcha().then(({data}: any) => {
        captchaBase64Image.value = data.data.captchaBase64Image
        captchaUuid.value = data.data.captchaUuid
        beginRefreshCaptchaInterval(data.data.expireSeconds, getCaptchaBase64Image)
    })
}
emitter.on('getCaptchaReply', () => {
    getCaptchaBase64Image()
})
onMounted(() => {
    generateEmoji('reply-to-user')
})
</script>
<template>
    <div id="reply-to-user" class="comment-respond" @mousedown="emojiEventReply($event)">
        <h3 id="reply-title" class="comment-reply-title">
            回复给{{ replyUserInfo.name }}
            <small></small>
        </h3>
        <div class="comment-form" id="commentform">
            <p class="comment-form-comment">
                <label for="comment">评论 <span class="required">*</span></label>
                <textarea ref="reply" v-model.trim="replyInfo" name="comment-reply" cols="45" rows="8" maxlength="65525"
                          required="required"></textarea>
            </p>
            <p class="comment-form-author">
                <label for="author">显示名称(登陆后自动获取)</label>
                <input id="author" name="author" disabled type="text" :value="userInfo.nickname" size="30"
                       maxlength="245" autocomplete="name" required="required">
            </p>
            <p class="comment-form-email">
                <label for="email">电子邮箱地址(登陆后自动获取)</label>
                <input id="email" name="email" disabled type="text" :value="userInfo.email" size="30" maxlength="100"
                       aria-describedby="email-notes" autocomplete="email" required="required">
            </p>
            <p class="comment-form-url">
                <label for="url">评论IP地址(登陆后自动获取)</label>
                <input id="url" name="url" type="text" disabled :value="userInfo.ipAddress" size="30" maxlength="200"
                       autocomplete="url">
            </p>
            <p class="form-captcha">
                <img :src="captchaBase64Image" alt="captcha" :id="captchaUuid" class="loaded"
                     @click="getCaptchaBase64Image">
                <label for="captcha">验证码
                    <span class="required">*</span>
                </label>
                <input id="captcha" name="captcha" type="text" v-model.trim="captchaCode" size="30" maxlength="200"
                       autocomplete="captcha">
            </p>
            <p class="form-submit">
                <input name="submit" type="submit" id="submit" class="submit" value="发表回复" @click="putReplyComment">
            </p>
            <div id="emojiButton" title="展开或收起表情" class="emoji-btn button" @click="toggleEmoji">🤚</div>
        </div>
    </div>
</template>
<style scoped>
#reply-to-user {
    display: none;
}
</style>
